<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>06_异步函数-await和async结合</title>
    <!-- 
  在 JavaScript 中， `async`  和  `await`  是用于处理异步操作的强大工具。它们的结合使得异步代码的编写更加简洁、可读且易于维护。
  1. 定义异步函数

  - 使用  `async`  关键字定义一个异步函数。异步函数会自动返回一个 Promise。
  - 在异步函数内部，可以使用  `await`  关键字来等待一个 Promise 的解决。
  async function fetchData() {
      // 函数体
  }
  2. 使用  `await`  关键字

  -  `await`  用于等待一个 Promise 的结果。它会暂停异步函数的执行，直到 Promise 被解决或拒绝。
  -  `await`  只能在  `async`  函数内部使用。

  示例代码：
  async function fetchData() {
      const response = await fetch('https://api.example.com/data'); // 等待 Promise 解决
      const data = await response.json(); // 解析 JSON 数据
      return data;
  }
  3. 错误处理

  - 在使用  `await`  时，建议使用  `try...catch`  语句来捕获可能发生的错误。这使得错误处理更加直观。
  async function fetchData() {
      try {
          const response = await fetch('https://api.example.com/data');
          if (!response.ok) {
              throw new Error('Network response was not ok');
          }
          const data = await response.json();
          return data;
      } catch (error) {
          console.error('Error fetching data:', error);
      }
  }
  4. 调用异步函数

  - 调用异步函数时，可以使用  `then()`  方法处理返回的 Promise，或者在另一个异步函数中使用  `await` 。
  // 使用 then() 方法
  fetchData().then(data => {
      console.log(data);
  });

  // 在另一个 async 函数中使用 await
  async function main() {
      const data = await fetchData();
      console.log(data);
  }

  main();
  5. 并行处理多个异步请求
  - 如果需要并行处理多个异步请求，可以使用  `Promise.all()` ，这样可以提高性能。
  async function fetchMultipleData() {
      try {
          const [response1, response2] = await Promise.all([
              fetch('https://api.example.com/data1'),
              fetch('https://api.example.com/data2'),
          ]);

          const data1 = await response1.json();
          const data2 = await response2.json();

          return [data1, data2]; // 返回多个数据
      } catch (error) {
          console.error('Error fetching data:', error);
      }
  }
  6. 总结
  -  `async`  和  `await`  的结合使得异步代码的编写更加简洁，逻辑更清晰。
  -  `async`  函数自动返回一个 Promise， `await`  用于等待 Promise 的结果。
  - 使用  `try...catch`  可以优雅地处理异步操作中的错误。
  - 可以通过  `Promise.all()`  实现多个异步请求的并行处理，提高性能。
  --></head>
  <body>
    <script>
      // 1. 定义异步函数
      function requestData() {
        console.log("发送网络请求");

        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve("Hello World res1");
          }, 2000);
        });
      }

      async function asyncFn() {
        console.log("asyncFn res2");
        return "Hello Async res2";
      }

      async function bar() {
        console.log("bar function res3");
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve("Hello Bar res3");
          }, 1000);
        });
      }

      async function foo() {
        console.log("foo function res4");
        return {
          then(resolve, reject) {
            resolve("Hello Foo res4");
          },
        };
      }

      // 2. 调用异步函数
      async function getData() {
        console.log("start");

        const res1 = await requestData();
        console.log(res1);

        const res2 = await asyncFn();
        console.log(res2);

        const res3 = await bar();
        console.log(res3);

        const res4 = await foo();
        console.log(res4);
        console.log("end");
      }

      getData();
      console.log("Hello end");
    </script>
  </body>
</html>
